<template>
  <scroll class="category-right-scroll">
    <div class="cate_info">
      <div v-for="(item, index) in categoryInfo" :key="index">
        <img :src="item.image" alt="" />
        <p>{{ item.title }}</p>
      </div>
    </div>
  </scroll>
</template>
<script>
import Scroll from "components/common/scroll/Scroll";
import { getCategoryInfo } from "network/category";

export default {
  name: "CategoryRight",
  components: {
    Scroll
  },
  data() {
    return {
      categoryInfo: []
    };
  },
  created() {
    this.$bus.$on("cateLeftClick", data => {
      // 获取左侧被点击的一级分类的maitKey属性，用于请求对应的二级分类的数据
      getCategoryInfo(data.maitKey).then(res => {
        this.categoryInfo = res.data.list;
      });
    });
  }
};
</script>

<style scoped>
.category-right-scroll {
  width: 70%;
  overflow: hidden;
  background-color: #fff;
}

.cate_info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly; /* space-evenly */
  padding-bottom: 20px;
}

.content img {
  height: 90px;
  width: 90px;
}

.content p {
  text-align: center;
}
</style>
